<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         table,table tr th, table tr td { border:1px solid #0094ff; }
    </style>
</head>
<body>
    <div>
        <input type="text" id="username" />
        <input type="radio" id="sexOne"  name="sex" value="男"/>男
        <input type="radio" id="sexTwo" checked name="sex" value="女"/>女
        <input type="text" id="age" />
        <button id="add">添加</button>
    </div>
    <br/>
    <table cellspacing="0" border="1" width="600px" >
      <thead>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
      </thead>
        <tbody>



        </tbody>
    </table>
    <script>
        //页面上输入用户的姓名、性别、年龄 确认后 列表的方式显示添加的数据
        //提示：取出input对应的dom对象后可以通过values属性获取到input中的内容
  
  var add1 = document.querySelector('#add')

  add1.onclick=function(){

    var name1 = document.querySelector('#username').value
  var raddio1 = document.querySelector('#sexOne').checked
  var raddio2 = document.querySelector('#sexTwo').checked
  var text1 = document.querySelector('#age').value

  var tbody = document.querySelector('tbody')
    var sex;
    if(raddio2===true){
        sex ='女'
    }else{
        sex = '男'
    }
    var str = ''
    var sr1 =''
    str += `
        <tr>
          <td>${name1}</td>
          <td>${sex}</td>
          <td>${text1}</td>
        </tr>
      `
    
    tbody.innerHTML =  tbody.innerHTML+str


    }


  

  



    </script>
</body>
</html>